<template>
    <a-card>
        <a-row :gutter="24">
            <a-col :span="6">
                <a-button type="primary" icon="rollback" @click="goBack">返回</a-button>
                <a-button type="primary" icon="plus" @click="showAddStore" style="margin-left: 8px">新增店铺</a-button>
                <!-- <a-button type="primary" @click="searchReset" icon="redo" style="margin-left: 8px">更新最新菜品</a-button> -->
            </a-col>
        </a-row>
        <div class="main">
            <div class="storeContent" ref="storeContent">
                <div class="storeList" v-for="(item, index) in storeList" :key="index">
                    <div class="storeTop">
                        <div>{{ item.storeName }}</div>
                        <div>
                            <a-button type="primary" icon="snippets" @click="showStoreEditForm(index)">编辑店铺信息</a-button>
                            <a-popconfirm title="确定删除吗?" @confirm="() => delStore(index)">
                                <a-button type="primary" icon="delete" style="margin-left: 10px;">删除店铺</a-button>
                            </a-popconfirm>
                            <a-button type="primary" @click="showAddFoodForm(index)" icon="plus"
                                style="margin-left: 10px;">新增菜品</a-button>
                            <a-button type="primary" @click="changeFoodList(index, item.id)" icon="retweet"
                                style="margin-left: 10px;">更换菜品</a-button>
                        </div>
                    </div>
                    <div class="foodContent" v-if="item.foodLists.length != 0">
                        <div class="foodList"
                            :class="{ 'checkList': index == checkStoreIndex && childIndex == checkFoodIndex }"
                            v-for="(foodItem, childIndex) in item.foodLists" :key="childIndex"
                            @click="setTmepInfo('edit', index, childIndex)">
                            <!-- @mouseleave="editFoodInfo(index, childIndex)" @click="setTmepInfo('edit', index, childIndex)" -->
                            <img :src="foodItem.foodPic" alt="">
                            <div class="foodInfo">
                                <a-input v-model="foodItem.foodName" @focus="setTmepInfo('edit', index, childIndex)"
                                    @blur="editFoodInfo(index, childIndex)"></a-input>
                                <p>{{ foodItem.productDescription }}</p>
                                <div>
                                    <span>限购：</span>
                                    <a-input v-model="foodItem.limitNum" @focus="setTmepInfo('edit', index, childIndex)"
                                        @blur="editFoodInfo(index, childIndex)"></a-input>
                                </div>
                                <div>
                                    <span>合作：</span>
                                    <a-input prefix="￥" v-model="foodItem.cooperatePrice"
                                        @focus="setTmepInfo('edit', index, childIndex)"
                                        @blur="editFoodInfo(index, childIndex)"></a-input>
                                </div>
                                <div>
                                    <span>售卖：</span>
                                    <a-input prefix="￥" v-model="foodItem.salePrice"
                                        @focus="setTmepInfo('edit', index, childIndex)"
                                        @blur="editFoodInfo(index, childIndex)"></a-input>
                                </div>
                            </div>
                            <svg t="1688975243714" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2286" width="200" height="200"
                                @click="delFood(index, childIndex)">
                                <path
                                    d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384S723.2 128 512 128zM512 832c-179.2 0-320-140.8-320-320s140.8-320 320-320 320 140.8 320 320S691.2 832 512 832z"
                                    p-id="2287"></path>
                                <path
                                    d="M672 352c-12.8-12.8-32-12.8-44.8 0L512 467.2 396.8 352C384 339.2 364.8 339.2 352 352S339.2 384 352 396.8L467.2 512 352 627.2c-12.8 12.8-12.8 32 0 44.8s32 12.8 44.8 0L512 556.8l115.2 115.2c12.8 12.8 32 12.8 44.8 0s12.8-32 0-44.8L556.8 512l115.2-115.2C684.8 384 684.8 364.8 672 352z"
                                    p-id="2288"></path>
                            </svg>
                        </div>
                    </div>
                    <div v-else style="height:80px;line-height: 80px;text-align: center;">暂未选择餐品</div>
                </div>
            </div>
            <div class="formContent">
                <food-edit ref="foodEdit" v-if="formMode == 1" :marginTop="marginTop"
                    @editFoodInfoByForm="editFoodInfoByForm" @addFood="addFood"></food-edit>
                <store-edit ref="storeEdit" v-if="formMode == 2" :marginTop="stroreMarginTop"
                    @getStoreInfo="getStoreInfo"></store-edit>
            </div>
        </div>
        <store-add ref="storeAdd" @getStoreList="getStoreList"></store-add>
        <food-list ref="foodList" @getFoodList="getFoodList"></food-list>
    </a-card>
</template>

<script>
import foodEdit from './foodEdit'
import storeEdit from './storeEdit.vue'
import storeAdd from './storeAdd.vue'
import foodList from './foodList.vue'
import { postAction, getAction, deleteAction } from '@api/manage'
export default {
    name: 'AntDesignVueJeecgStoreList',
    components: { foodEdit, storeEdit, storeAdd, foodList },
    data() {
        return {
            storeList: [
            ],
            checkStoreIndex: null,
            checkFoodIndex: null,

            formMode: null, //表单控制字段：1--商品信息表单，2--商家信息表单
            changeStoreIndex: '', //商户更改菜品的临时存储index
            companyId: '',
            companyInfo: '',

            foodFormFlag: false,
            tempFoodInfo: '',

            marginTop: 0,
            stroreMarginTop: 0
        };
    },
    mounted() {
        window.addEventListener('scroll', () => {
            this.setHeight();
        })
    },

    methods: {
        show(record) {
            console.log('record', record);
            this.companyInfo = record;
            this.companyId = record.companyId;
            this.getStoreWithFoodList();
        },
        goBack() {
            this.$emit('changeMode', 2)
        },
        setHeight() {
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            let mainHeight = document.getElementsByClassName('storeContent')[0].offsetHeight;
            console.log('左边主体高度', mainHeight, 'formMode', this.formMode, 'scrollTop', scrollTop);
            if (this.formMode == 1) {
                this.$nextTick(() => {
                    // setTimeout(() => {
                    let foodEditMaxHeight = document.getElementsByClassName('foodEditContent')[0].offsetHeight;
                    // console.log('foodEditMaxHeight', foodEditMaxHeight);
                    if (scrollTop > mainHeight - foodEditMaxHeight) {
                        scrollTop = mainHeight - foodEditMaxHeight
                    }
                    if (scrollTop < 0) {
                        scrollTop = 0
                    }

                    if(this.marginTop==0){
                        this.marginTop = scrollTop-50;
                    }
                    // }, 1000)
                })
            } else if (this.formMode == 2) {
                console.log('!!!')
                this.$nextTick(() => {
                    let storeEditMaxHeight = document.getElementsByClassName('storeEditContent')[0].offsetHeight;
                    if (scrollTop > mainHeight - storeEditMaxHeight) {
                        scrollTop = mainHeight - storeEditMaxHeight
                    }
                    if (scrollTop < 0) {
                        scrollTop = 0
                    }
                    this.stroreMarginTop = scrollTop;
                })
            }
        },
        async getStoreWithFoodList() {
            let res = await getAction('hc/hcCompanyFoodDisplay/queryByCompanyId', { companyId: this.companyId, detailId: this.companyInfo.id });
            this.storeList = res.result;
            console.log('this.storeList', this.storeList);
        },
        //显示商品表单--鼠标点击:编辑
        setTmepInfo(type, storeIndex, foodIndex) {
            this.checkStoreIndex = storeIndex;
            this.checkFoodIndex = foodIndex;
            this.formMode = 1;
            this.tempFoodInfo = JSON.stringify(this.storeList[storeIndex].foodLists[foodIndex]);
            if (type == 'edit') {
                this.$nextTick(() => {
                    this.marginTop=0;
                    this.$refs.foodEdit.setDefault('edit', this.storeList[storeIndex].foodLists[foodIndex]);
                });
            } else {
                this.$nextTick(() => {
                    this.$refs.foodEdit.clearData();
                });
            }
            this.setHeight();
        },
        //编辑菜品信息:若菜品信息变更之后才进行提交
        async editFoodInfo(storeIndex, foodIndex) {
            if (this.checkStoreIndex == storeIndex && this.checkFoodIndex == foodIndex) {
                let limitNum = this.storeList[this.checkStoreIndex].foodLists[this.checkFoodIndex].limitNum
                if (!limitNum) {
                    this.$message.warning('请填写限购数量')
                    this.$set(this.storeList[this.checkStoreIndex].foodLists[this.checkFoodIndex], 'limitNum', -1);
                }
                if (isNaN(limitNum)) {
                    this.$message.warning('限购请填写数字')
                    this.$set(this.storeList[this.checkStoreIndex].foodLists[this.checkFoodIndex], 'limitNum', -1);
                }
                if (limitNum < -1) {
                    this.$message.warning('限购最小为-1')
                    this.$set(this.storeList[this.checkStoreIndex].foodLists[this.checkFoodIndex], 'limitNum', -1);
                }
                let nowFoodInfo = JSON.stringify(this.storeList[this.checkStoreIndex].foodLists[this.checkFoodIndex]);
                // if (nowFoodInfo != this.tempFoodInfo) {
                let res = await postAction('hc/hcCompanyFoodList/edit', this.storeList[this.checkStoreIndex].foodLists[this.checkFoodIndex]);
                console.log('编辑菜品res', res);
                console.log('nowFoodInfo', nowFoodInfo);
                this.tempFoodInfo = nowFoodInfo;
                this.$refs.foodEdit.changeModelValue(nowFoodInfo)
                // } else {
                //     console.log('!!!!!!!')
                // }
            }
        },
        //编辑菜单信息--表单保存
        async editFoodInfoByForm(record) {
            let res = await postAction('hc/hcCompanyFoodList/edit', record);
            console.log('编辑菜品res', res);
            if (res.success) {
                this.$message.success('商品信息修改成功');
                this.getStoreWithFoodList();
                this.$refs.foodEdit.cancel();
            } else {
                this.$message.warning(res.message);
            }
        },
        //显示商品表单--新增
        showAddFoodForm(index) {
            this.checkStoreIndex = index;
            this.formMode = 1
            this.$nextTick(() => {
                this.$refs.foodEdit.setDefault('add');
            })
            this.setHeight();
        },
        //新增商品信息
        async addFood(params) {
            params.companyDetailId = this.companyInfo.id;
            params.companyId = this.companyInfo.companyId;
            params.merchantId = this.storeList[this.checkStoreIndex].id;
            let res = await postAction('hc/hcCompanyFoodDisplay/addDisPlayProd', params);
            if (res.success) {
                this.$message.success('商品新增成功');
                this.getStoreWithFoodList();
                this.$refs.foodEdit.cancel();
            } else {
                this.$message.warning(res.message);
            }
        },
        //删除菜品信息
        async delFood(storeIndex, foodIndex) {
            let res = await deleteAction('hc/hcCompanyFoodDisplay/deleteNew', { id: this.storeList[storeIndex].foodLists[foodIndex].id, detailsId: this.companyInfo.id });
            console.log('删除res', res);
            this.storeList[storeIndex].foodLists.splice(foodIndex, 1);
        },
        //展示店铺信息form表单
        showStoreEditForm(index) {
            this.checkStoreIndex = index;
            this.formMode = 2;
            console.log('55666', this.storeList[this.checkStoreIndex].isHideFullPriceProd);
            let checkInfo = this.storeList[this.checkStoreIndex];
            let {
                isHideFullPriceProd,
                merchantCooperatePrice,
                limitNum,
                companyMerchantSort,
                salePrice
            } = checkInfo;
            this.$nextTick(() => {
                this.$refs.storeEdit.setDefault({ isHideFullPriceProd, merchantCooperatePrice, salePrice, limitNum, companyMerchantSort });
            })
            this.setHeight();
        },
        //暂时选择店铺的弹窗
        showAddStore() {
            let storeIds = [];
            this.storeList.forEach(item => {
                storeIds.push(item.id)
            })
            this.$refs.storeAdd.show('edit', this.companyInfo.siteId, storeIds.join(','), this.companyInfo)
        },
        //刷新最新菜品
        searchReset() {
        },
        //删除店铺
        async delStore(index) {
            if (this.storeList.length == 1) {
                this.$message.warning('请保留至少一个店铺');
                return;
            }
            let res = await getAction('hc/hcCompanyDetail/deleteMerchant', { companyId: this.companyId, merchantId: this.storeList[index].id, detailId: this.companyInfo.id })
            if (res.success) {
                this.$message.success('店铺删除成功')
                this.companyInfo.listingStoreIds = this.companyInfo.listingStoreIds.split(',').filter(item => item != this.storeList[index].id).join();
                this.storeList.splice(index, 1);
                console.log('this.storeList', this.storeList);
                console.log('this.companyInfo.listingStoreIds', this.companyInfo.listingStoreIds);
            } else {
                this.$message.warning(res.message)
            }
        },
        //展示更换菜品弹窗
        changeFoodList(index, id) {
            this.changeStoreIndex = index;
            console.log(this.storeList[index], '643464');
            let tempArr = [];
            this.storeList[index].foodLists.forEach(item => {
                tempArr.push(item.id);
            })
            this.$refs.foodList.show(this.companyId, id, tempArr.join(','));
        },
        //获取更改的菜品
        async getFoodList(data) {
            console.log('getFoodList', data);
            // let oldList = JSON.parse(JSON.stringify(this.storeList[this.changeStoreIndex].foodLists));
            // this.storeList[this.changeStoreIndex].foodLists = [...this.storeList[this.changeStoreIndex].foodLists, ...data];
            // let ids = [];
            // this.storeList[this.changeStoreIndex].foodLists.forEach((item => {
            //     ids.push(item.id);
            //     oldList.forEach(oldItem => {
            //         item.id == oldItem && (item = oldItem);
            //     })
            // }))
            let res = await postAction('hc/hcCompanyFoodDisplay/add', {
                companyId: this.companyId,
                merchantId: this.storeList[this.changeStoreIndex].id,
                foodsListIds: data.join(','),
                companyDetailId: this.companyInfo.id
            })
            this.getStoreWithFoodList();
            console.log('添加商品的res', res);
        },
        //获取新增的店铺列表进行编辑
        async getStoreList(record) {
            let { merchantIds } = record;
            this.companyInfo.listingStoreIds = this.companyInfo.listingStoreIds + ',' + merchantIds
            let res = await postAction('hc/hcCompanyDetail/edit', this.companyInfo);
            if (res.success) {
                this.$message.success('店铺新增成功');
                this.getStoreWithFoodList();
                this.$refs.storeAdd.cancel();
            } else {
                this.$message.warning()
            }
        },
        //获取店铺编辑后的信息并保存
        async getStoreInfo(record) {
            let {
                isHideFullPriceProd,
                merchantCooperatePrice,
                limitNum,
                companyMerchantSort,
                salePrice
            } = record;
            let params = {
                companyId: this.companyId,
                merchantId: this.storeList[this.checkStoreIndex].id,
                isHideFullPriceProd,
                merchantCooperatePrice,
                limitNum,
                companyMerchantSort,
                salePrice
            }
            let res = await postAction('hc/hcCompanyMerchantSetting/add', params);
            console.log('res', res);
            if (res.success) {
                this.$message.success('店铺信息保存成功');
            } else {
                this.$message.warning(res.message);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
p {
    margin: 0;
}

.main {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 20px;

    .storeContent {
        flex: 6.5;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;

        .storeList {
            border: 1px solid #eeefef;
            padding: 0 10px 10px 10px;
            margin-bottom: 10px;

            .storeTop {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                border-bottom: 1px solid #eeefef;
                padding: 10px 0;
            }

            .foodContent {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;

                .foodList {
                    width: calc((100% - 60px) / 4);
                    border: 1px solid #eeefef;
                    padding: 5px;
                    position: relative;
                    border-radius: 5px;
                    margin-bottom: 10px;
                    margin-left: 20px;
                    box-sizing: border-box;

                    &:nth-child(4n+1) {
                        margin-left: 0;
                    }

                    svg {
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        right: -10px;
                        top: -10px;
                        cursor: pointer;
                    }

                    img {
                        width: 100%;
                        object-fit: cover;
                    }

                    .foodInfo {
                        padding: 10px 0;

                        >p {
                            color: #666;
                        }

                        input {
                            height: auto;
                            border: 0;
                            border-bottom: 1px solid #ccc;
                            border-radius: 0;
                            color: #000;

                            &:focus {
                                border-bottom: 1px solid #ccc;
                                box-shadow: none;
                            }
                        }

                        >input {
                            padding-left: 0;
                            padding-right: 0;
                            margin-bottom: 5px;
                        }

                        p {
                            line-height: 1.5;
                            font-size: 12px;

                            &:nth-child(1) {
                                font-size: 14px;
                            }
                        }

                        div {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-size: 12px;
                            line-height: 1.5;
                            margin: 10px 0;

                            span {
                                &:nth-child(1) {
                                    flex: calc(12px * 4);
                                }

                                &:nth-child(2) {
                                    flex: auto;
                                }

                                ::v-deep .ant-input {
                                    width: 100% !important;
                                    flex: 1 !important;
                                    font-size: 12px;
                                    line-height: 1.2;
                                    padding-left: 15px;
                                    padding-right: 15px;
                                    border: 0;
                                    border-bottom: 1px solid #ccc;
                                    border-radius: 0;
                                }

                                ::v-deep .ant-input-prefix {
                                    left: 0;
                                }
                            }


                            &:last-child {
                                color: red;

                                span {
                                    ::v-deep .ant-input {
                                        color: red !important;
                                    }

                                    ::v-deep .ant-input-prefix {
                                        color: red !important;
                                    }
                                }
                            }

                            >input {
                                flex: auto;
                                box-sizing: border-box;
                                padding-left: 15px;
                            }
                        }
                    }
                }

                .checkList {
                    border: 2px solid skyblue;
                }
            }
        }
    }

    .formContent {
        flex: 3.5;
        margin-left: 40px;
    }
}
</style>